<template>
    <div>
        <div class="container">
        <h3 style="margin-bottom: 20px">原料信息</h3>
        <el-form :model="ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="原料类型：">
                        {{ruleForm.materialType}}
                    </el-form-item>
                    <el-form-item label="进厂编号：">
                        {{ruleForm.inBatch}}
                    </el-form-item>
                    <el-form-item label="入库类型：">
                        {{ruleForm.inType}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入库时间：">
                        {{ruleForm.inTime}}
                    </el-form-item>
                    <el-form-item label="仓库：">
                        {{ruleForm.warehouse}}
                    </el-form-item>
                </el-col>
            </el-row>
            <div v-if="ruleForm.inType == '追溯码入库'">
                <el-form-item label="追溯码：">
                    {{ruleForm.code}}
                </el-form-item>
                <el-row class="container box">
                    <el-col :span="12">
                        <h4>追溯码：</h4>
                        <el-divider></el-divider>
                        <dl>
                            <dt>物料信息</dt>
                            <dd>品名：</dd>
                            <dd>规格：</dd>
                            <dd>保质期：</dd>
                            <dd>生产批次：</dd>
                        </dl>
                        <dl>
                            <dt>相关凭证</dt>
                            <dd>产地与其他：</dd>
                            <dd>检验报告：</dd>
                        </dl>
                    </el-col>
                    <el-col :span="11">
                        <p>计数：</p>
                        <div class="record-tip-con">
                            <el-alert v-for="(item,index) in codeList" :key="index" :title="item" type="info" @click.native="handelShow(index)" @close="handleClose(index)"></el-alert>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div v-else-if="'采购入库'">
                <el-form-item label="品名：">
                    {{ruleForm.breedName}}
                </el-form-item>
				<el-form-item label="产地：">
				    {{ruleForm.address}}
				</el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生产时间：">
                            {{ruleForm.scTime}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="有效期至：">
                            {{ruleForm.deadLine}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="品名：">
                            {{ruleForm.breedName}}
                        </el-form-item>
						<el-form-item label="产地：">
						    {{ruleForm.address}}
						</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生产日期：">
                            {{ruleForm.scTime}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="有效期至：">
                            {{ruleForm.deadLine}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="数量：">
                        {{ruleForm.totalNum}}{{ruleForm.units}}
                    </el-form-item>
                    <el-form-item label="厂家生产批号：">
                        {{ruleForm.inBatch}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        &nbsp;&nbsp;
                    </el-form-item>
                    <el-form-item label="供应商：">
                        {{ruleForm.supplyCompany}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="质量标准：">
                        {{ruleForm.qualityStandard}}
                </el-form-item>

                </el-row>
            <el-form-item class="footerFixed">
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
        </div>
		<div class="container" style="margin-top:20px">
		    <h3 style="margin-bottom: 20px">新增入库明细</h3>
		    <el-table
		        :data="tableData1"
		        border
		        ref="multipleTable"
		        header-cell-class-name="table-header"
		    >
		        <el-table-column prop="inTime" sortable label="入库日期"></el-table-column>
		        <el-table-column prop="totalNum" sortable label="入库数量">
		                <template slot-scope="scope">
		                    {{scope.row.totalNum}}{{scope.row.units}}
		                </template>
		        </el-table-column>
		        <el-table-column prop="userName" sortable label="操作人"></el-table-column>
		    </el-table>
		</div>
        <div class="container" style="margin-top:20px">
            <h3 style="margin-bottom: 20px">报损明细</h3>
            <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="time" sortable label="报损日期"></el-table-column>
                <el-table-column prop="lossNum" sortable label="报损数量">
                        <template slot-scope="scope">
                            {{scope.row.lossNum}}{{scope.row.lossUnits}}
                        </template>
                </el-table-column>
                <el-table-column prop="name" sortable label="报损人"></el-table-column>
                <el-table-column prop="lossExplain" sortable label="报损原因"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import {material_findById} from "@/request/api";
    export default {
        data() {
            return {
                ruleForm: {},
                tableData: [],
                tableData1: [],
                codeList: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                materialTypeStor: ''
            }
        },
        methods: {
            backPage () {
                this.$router.go(-1);
                this.$store.commit('setStorName',this.materialTypeStor)
            },
            init(){
                material_findById(this.id).then((res) =>{
                    this.ruleForm = res.data
                    this.tableData = res.data.lossList
                    this.materialTypeStor = this.ruleForm.materialType
					this.tableData1 = res.data.materialDetaileds
                // console.log(this.ruleForm.materialType,1)
                })
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init()
            },
            handleClose(index){

            },
            handelShow(index){
                // console.log(11)
            },
        },
        mounted() {
            this.id = this.$route.query.id
            this.init();
            // console.log(this.$store.state.pagNum)
        }
    }
</script>
<style lang="less" scoped>

.el-row{ margin-bottom: 20px;}
.el-pagination{
    text-align: center;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
